/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useState } from 'react';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import { superTmp } from '@/pages/sms/specialTmp/index.d';
import { useSelector } from 'umi';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import type { ConnectState } from '@/models/connect';
import { getWaitForApproveTemplate, artificialDealTemplate } from '@/services/sms/specialTmp';
import { Button, message, Popconfirm, Space } from 'antd';
import styles from './table.less';

const Index: React.FC = () => {
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const [rowKeys, setRowKeys] = useState<any[]>([]);
  const [rowKeyList, setRowKeyList] = useState<string>('');
  const actionRef = useRef<ActionType>();
  const handleChange = (_: any) => {
    setRowKeys(_);
    setRowKeyList(_.join(','));
  };
  const handleRequest = async (params: any) => {
    const { current: page, pageSize: limit } = params;
    return getWaitForApproveTemplate({ page, limit });
  };
  const handleClick = async (tids: string, status: string) => {
    if (!tids) {
      message.error('请至少选择一项');
      return;
    }
    const { code, msg } = await artificialDealTemplate({ tids, status });
    if (code == 0) {
      setRowKeys([]);
      setRowKeyList('');
      actionRef.current?.reload();
      message.success('操作成功');
      return;
    }
    message.error(msg);
  };
  const columns: ProColumns<superTmp>[] = [
    {
      title: '模板ID',
      dataIndex: 'tid',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '模板内容',
      dataIndex: 'content',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '发送账号',
      dataIndex: 'cmPhone',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'options',
      align: 'center',
      search: false,
      ellipsis: true,
      width: winSize === 'xs' ? 80 : 230,
      fixed: 'right',
      render: (_: any, record: superTmp) => {
        return (
          <Space direction={winSize === 'xs' ? 'vertical' : 'horizontal'}>
            <Popconfirm
              title='你确定通过审核吗？'
              onConfirm={handleClick.bind(this, record.tid, 'approved')}
              key='approved'
            >
              <a>通过审核</a>
            </Popconfirm>
            <Popconfirm
              title='你确定扣钱不发吗？'
              onConfirm={handleClick.bind(this, record.tid, 'reject')}
              key='reject'
            >
              <a>扣钱不发</a>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  return (
    <DragTable>
      <ProTable<superTmp>
        actionRef={actionRef}
        rowKey='tid'
        request={handleRequest}
        columns={columns}
        className={styles.superTmp}
        pagination={{
          pageSize: 30,
          showQuickJumper: false,
          showSizeChanger: false,
        }}
        scroll={{ x: 640 }}
        options={false}
        search={{
          collapsed: false,
          optionRender: () => [
            <Popconfirm
              title='你确定批量通过审核吗？'
              onConfirm={handleClick.bind(this, rowKeyList, 'approved')}
              key='approved1'
            >
              <Button type='primary'>批量通过</Button>
            </Popconfirm>,
            <Popconfirm
              title='你确定批量扣钱不发吗？'
              onConfirm={handleClick.bind(this, rowKeyList, 'reject')}
              key='reject2'
            >
              <Button type='primary'>批量扣钱不发</Button>
            </Popconfirm>,
          ],
        }}
        rowSelection={{
          type: 'checkbox',
          selectedRowKeys: rowKeys,
          onChange: handleChange,
          hideSelectAll: false,
        }}
      />
    </DragTable>
  );
};

export default Index;
